<template>
  <el-card class="box-card">
    <!-- 操作区域 -->
    <div class="caozuo">
      <el-row>
        <div>
          <el-button
            plain
            type="primary"
            size="small"
            @click="$router.push('/exam/addExam')"
            :disabled="!checkPerm('exam:exam:create')"
            >创建考试</el-button
          >
        </div>
      </el-row>
    </div>
    <br />
    <!-- 表单筛选区域【列表】 -->
    <el-form label-width="100px" :inline="true" size="normal">
      <el-row type="flex" justify="start">
        <el-form-item label="考试名称">
          <el-input
            v-model="queryData.exam_name"
            style="width: 190px"
            size="small"
            placeholder="考试名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="学科名称">
          <el-select
            size="small"
            v-model="queryData.subject_id"
            style="width: 190px"
            placeholder="归属学科"
            clearable
          >
            <el-option
              v-for="item in treeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              @click.native="treeClick(item.id)"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学科名称">
          <el-select
            size="small"
            v-model="queryData.directory_id"
            style="width: 190px"
            placeholder="归属目录"
            clearable
          >
            <el-option
              v-for="item in childTreeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考试类型">
          <el-select
            size="small"
            v-model="queryData.exam_type"
            style="width: 190px"
            placeholder="请选择"
          >
            <el-option
              v-for="item in text"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row type="flex" justify="start">
        <el-form-item label="锁屏方式">
          <el-select
            size="small"
            v-model="queryData.lock_screen"
            style="width: 190px"
            placeholder="请选择"
          >
            <el-option
              v-for="item in lock"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建人">
          <el-input
            style="width: 190px"
            v-model="queryData.create_name"
            size="small"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            style="width: 240px"
            size="small"
            v-model="queryData.create_time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item style="margin-left: 130px">
          <el-button size="small" type="primary" plain @click="searchOk"
            >搜索</el-button
          >
          <el-button size="small" @click="searchCancel">重置</el-button>
        </el-form-item>
      </el-row>
    </el-form>

    <br />
    <!-- 表格区域 -->
    <el-table :data="list" border stripe>
      <el-table-column
        align="center"
        width="60px"
        type="index"
        label="序号"
      ></el-table-column>
      <el-table-column align="center" label="考试信息">
        <template slot-scope="{ row }">
          <el-descriptions :column="6">
            <el-descriptions-item label="考试ID">{{
              row.id
            }}</el-descriptions-item>
            <el-descriptions-item label="考试名称">
              <a href="javascript:;" style="color: #66b1ff">
                {{ row.exam_name }}
              </a>
            </el-descriptions-item>
            <el-descriptions-item label="归属学科">{{
              row.subject_name
            }}</el-descriptions-item>
            <el-descriptions-item label="归属目录">{{
              row.directory_name
            }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="6">
            <el-descriptions-item label="考试类型">{{
              row.exam_type == 1 ? "阶段考核" : "综合考核"
            }}</el-descriptions-item>
            <el-descriptions-item label="考试方式">{{
              row.lock_screen == 1 ? "不锁屏" : "锁屏"
            }}</el-descriptions-item>
            <el-descriptions-item label="创建人">{{
              row.create_name
            }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{
              row.created_at | formatTime
            }}</el-descriptions-item>
            <el-descriptions-item label="考试信息">
              <!-- <el-tag size="small">{{ row.main_paper_name }}</el-tag> -->
              <el-tag
                class="tag"
                size="mini"
                @click="paper(row.main_paper_name)"
                >点击查看</el-tag
              >
            </el-descriptions-item>
            <el-descriptions-item label="推送班级">
              <div v-if="row.exam_bind_class.length === 0">暂无</div>
              <el-tag
                class="tag"
                v-else
                size="mini"
                @click.native="bindClass(row.exam_bind_class)"
                :disabled="!checkPerm('exam:exam:update')"
                >点击查看</el-tag
              >
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </el-table-column>
      <el-table-column align="center" width="150px" label="操作">
        <template slot-scope="{ row }">
          <el-button
            size="small"
            type="warning"
            icon="el-icon-connection"
            circle
            @click.native="classClick(row)"
          ></el-button>
          <el-button
            v-if="row.exam_bind_class.length === 0"
            size="small"
            type="danger"
            icon="el-icon-delete"
            circle
            :disabled="!checkPerm('exam:exam:delete')"
            @click.native="delRow(row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page.sync="queryData.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="queryData.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
    >
    </el-pagination>
    <el-dialog title="考试试卷信息" :visible.sync="dialogShow" width="30%">
      <el-descriptions>
        <el-descriptions-item label="主考试卷">
          <a href="javascript:;" style="color: #66b1ff">
            {{ parperText }}
          </a>
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer">
        <el-button type="primary" @click="dialogShow = false">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 推送班级弹框 -->
    <BanExam ref="banExam" @updateList="initData"></BanExam>
    <!-- 班级列表弹框 -->
    <classExam ref="classExam" @updateList="initData"></classExam>
  </el-card>
</template>

<script>
import {
  getExamListApi,
  getExamTree,
  delExamApi,
  getExamClassApi,
} from "@/api/exam";
import { formatTime } from "@/filters";
import BanExam from "@/views/exam/components/banExam.vue";
import classExam from "./components/classExam.vue";
import checkPerm from "@/mixins/checkPerm";

export default {
  mixins: [checkPerm],
  name: "Exam",
  components: {
    BanExam,
    classExam,
  },
  data() {
    return {
      // 列表变量
      value: "",
      list: [],
      treeList: [],
      childTreeList: [],
      dialogShow: false, // 控制考试信息弹框
      parperText: "",
      queryData: {
        exam_name: "", // 考试名称
        subject_id: "", // 归属学科
        directory_id: "", // 归属目录
        exam_type: "", // 考试类型
        lock_screen: "", // 锁屏方式
        create_name: "", // 创建人
        create_time: "", // 创建时间
        page: 1,
        limit: 5,
      },

      // 列表总条数
      total: 0,
      text: [
        {
          value: "阶段考核",
          id: 1,
        },
        {
          value: "综合考核",
          id: 2,
        },
      ],

      // 锁屏方式
      lock: [
        {
          value: "锁屏",
          id: 2,
        },
        {
          value: "不锁屏",
          id: 1,
        },
      ],
    };
  },
  created() {
    this.initData();
  },
  methods: {
    // 打开考试信息弹框
    paper(text) {
      this.dialogShow = true;
      this.parperText = text;
    },
    // 获取数据列表
    async initData() {
      if (!this.checkPerm("exam:exam:index")) {
        return;
      } else {
        let { list, total } = await getExamListApi(this.queryData);
        this.list = list;
        this.total = total;
        // 获取归属学科下拉框数据
        let res = await getExamTree();
        this.treeList = res;
      }
    },
    // 获取推送班级信息
    bindClass(text) {
      this.$refs.banExam.dialogShow = true;
      this.$refs.banExam.formData = text;
    },
    // 班级信息列表
    async classClick(text) {
      let { list } = await getExamClassApi({
        subject_id: text.subject_id,
        state: 1,
      });
      this.$refs.classExam.dialogShow = true;
      this.$refs.classExam.formData = list;
      this.$refs.classExam.main_paper_id = text.main_paper_id;
      this.$refs.classExam.exam_id = text.id;
    },
    // 获取学科目录下拉框数据
    treeClick(id) {
      this.childTreeList = this.treeList.filter(
        (item) => item.id === id
      )[0].children;
      console.log(this.childTreeList);
    },
    // 【列表功能】分页功能
    sizeChange(val) {
      this.queryData.limit = val;
      this.initData();
    },
    // 【列表功能】分页功能
    currentChange(val) {
      this.queryData.page = val;
      this.initData();
    },
    // 【列表功能】搜索-提交功能
    searchOk() {
      this.queryData.page = 1;
      this.initData();
    },
    // 【列表功能】搜索-重置功能
    searchCancel() {
      this.queryData.page = 1;
      this.queryData = {
        exam_name: "", // 考试名称
        subject_id: "", // 归属学科
        directory_id: "", // 归属目录
        exam_type: "", // 考试类型
        lock_screen: "", // 锁屏方式
        create_name: "", // 创建人
        create_time: "", // 创建时间
      };
      this.initData();
    },
    // 删除事件
    async delRow(id) {
      try {
        await this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
      } catch (error) {
        return console.log(error);
      }
      await delExamApi(id);
      this.$message.success("添加成功");
      this.initData();
    },
  },
};
</script>

<style scoped>
.caozuo {
  display: flex;
  flex-direction: row-reverse;
}
.tag {
  cursor: pointer;
}
.box-card {
  margin: 20px;
}
</style>
